<template>
	<div style="margin-bottom: 100px;">
		<canvas
			:style="{ width: '100vw', height: canvasHeight + 'px', display: 'flex', alignItems: 'center', justifyContent: 'center' }"
			canvas-id="canvasOne"></canvas>
		<!-- <img style="width: 100%;height: 100vh;position: absolute;margin-top: -90vh;" :src="mergedImage"
			alt="Merged Image" v-if="mergedImage" /> -->
		<view class='submit-button' @click='savePosterPath'>保存海报</view>
	</div>
</template>

<script>
	import {
		getqrCode,
		getUserInfo,
		getQrCodeBag
	} from '@/api/user.js';

	export default {
		data() {
			return {
				userName: '',
				mergedImage: '', // 合成后的图片URL
				backgroundImageUrl: '', // 背景图片URL
				qrImg: '', // 二维码图片URL
				screenWidth: uni.getSystemInfoSync().screenWidth, // 获取屏幕宽度
			};
		},
		computed: {
			// 基于屏幕宽度计算画布高度，这里假设宽高比为2:3
			canvasHeight() {
				return this.screenWidth * (690 / 400);
			}
		},
		onShow() {
			if (uni.getStorageSync('LOGIN_STATUS_TOKEN')) {
				this.createPoster();
			} else {
				uni.showToast({
					title: '请先登录,再进行推广',
					icon: 'none'
				});
				uni.navigateTo({
					url: '/pages/users/wechat_login/index'
				})
			}
		},
		mounted() {
			const params = {
				pageSize: 99,
				pageNumber: 1,
				state: 1,
			};
			getQrCodeBag(params).then(res => {
				this.backgroundImageUrl = res.data.records[0].posterAddress;
			});
		},
		methods: {
			createPoster() {
				// 获取二维码图片
				getqrCode().then(res => {
					if (res.msg) {
						this.qrImg = res.msg;
						getUserInfo().then(res => {
							this.userName = res.data.nickname
							this.mergeImages();
						})
					}
				});

			},
			mergeImages() {
				let context = uni.createCanvasContext('canvasOne');
				context.clearRect(0, 0, this.screenWidth, this.canvasHeight); // 清除画布
				// 绘制背景图
				uni.downloadFile({
					url: this.backgroundImageUrl,
					success: (downloadRes) => {
						if (downloadRes.statusCode === 200) {
							const backgroundTempFilePath = downloadRes.tempFilePath;
							context.drawImage(backgroundTempFilePath, 0, 0, this.screenWidth, this
								.canvasHeight);
							// 绘制二维码
							uni.downloadFile({
								url: this.qrImg,
								success: (qrDownloadRes) => {
									if (qrDownloadRes.statusCode === 200) {
										const qrTempFilePath = qrDownloadRes.tempFilePath;
										// 计算二维码的位置和大小
										const qrX = (this.screenWidth - 140) / 2;
										const qrY = this.canvasHeight - 80;
										context.drawImage(qrTempFilePath, qrX, qrY, 65, 65);
										// 绘制文字
										context.setFontSize(14);
										// 计算文字位置
										const textY = this.canvasHeight - 36;
										const nameY = this.canvasHeight - 60;
										context.fillStyle = 'white';
										context.fillText('邀请您加入', (this.screenWidth +10) / 2,
											textY);
										context.fillText(this.userName, (this.screenWidth  +10) /
											2, nameY);
										// 将画布内容导出为图片
										context.draw(true, () => {
											uni.canvasToTempFilePath({
												destWidth: this.screenWidth*3,
												destHeight: this.canvasHeight*3,
												canvasId: 'canvasOne',
												fileType: 'jpg',
												success: (res) => {
													console.log(this
														.mergedImage,
														"this.mergedImage")
													this.mergedImage = res
														.tempFilePath; // 更新数据属性
												}
											});
										});
									}
								}
							});
						}
					}
				});
			},
			savePosterPath() {
				uni.saveImageToPhotosAlbum({
					filePath: this.mergedImage,
					success: () => {
						this.$util.Tips({
							title: '保存成功',
							icon: 'success'
						});
					},
					fail: () => {
						this.$util.Tips({
							title: '保存失败'
						});
					}
				});
			}
		}
	};
</script>

<style scoped>
	img {
		max-width: 100%;
	}

	.submit-button {
		width: 200px;
		height: 40px;
		line-height: 40px;
		background-color: #085CD6;
		border-radius: 40px;
		font-size: 22px;
		color: #fff;
		text-align: center;
		margin: 20px auto;
	}
</style>